<template>
	<div class="letter_container">
		<el-tabs type="border-card" class="custom_top" v-model="activeName">
			<el-tab-pane label="收件箱" name="1"></el-tab-pane>
			<el-tab-pane label="发件箱" name="2"></el-tab-pane>
		</el-tabs>
		<sw-common-frame :count="dataCount" :loading="loading" v-if="dataCount > 0">
			<template slot="button">
				<template v-if="activeName === '1'">
					<el-button size="small" type="primary" icon="el-icon-sw-epistolize" @click="handleReadAll()">阅读所有</el-button>
				</template>
				<template v-else-if="activeName === '2'">
					<el-button size="small" type="primary" icon="el-icon-sw-epistolize" @click="handleEpistolize()">写信</el-button>
				</template>
			</template>
			<el-form slot="query" size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.title" clearable placeholder="请输入标题" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<template slot="component">
				<template v-for="(item, index) in letterListData">
					<letter-item :type="activeName" :data="item" @refresh="queryTableData()" />
				</template>
			</template>
			<template slot="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()" />
			</template>
		</sw-common-frame>
		<el-empty v-else description="暂无信件" :image-size="150"></el-empty>
	</div>
</template>

<script>
import letterItem from './item';
import { mapGetters } from 'vuex';
import { getNoticePageList, getPrivateLetterData, readAllLetter } from '@/api/front/sysNotice';
export default {
	components: { letterItem },
	data() {
		return {
			activeName: '1',
			dataCount: 0,
			loading: false,
			letterListData: [],
			queryData: { page: 1, limit: 10 }
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		letterRequest() {
			if (this.activeName === '1') {
				return getPrivateLetterData;
			} else if (this.activeName === '2') {
				return getNoticePageList;
			}
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryData.page = 1;
				this.queryData.title = '';
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//获取信件
		async getTableData() {
			let params = { ...this.queryData, type: 2, createBy: this.userInfo.id };
			let result = await this.letterRequest(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.letterListData = result.data || [];
			}
		},

		//查询信件
		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//阅读所有
		async handleReadAll() {
			let result = await readAllLetter().then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('阅读所有信件成功');
				this.queryTableData();
			}
		},
		//写信
		handleEpistolize() {
			this.$router.push('/front/userCenter/message/add');
		}
	}
};
</script>
<style lang="scss" scoped>
.letter_container::v-deep {
	.el-tabs__header {
		margin-bottom: 0;
	}
	.el-tabs__item {
		font-size: 16px;
		padding: 0 16px !important;
	}
}
</style>
